<template>
  <div class="page">

    <div style="padding: 12px;background-color: #fff;display: flex;align-items: center;justify-content: space-between;">
      <div style="font-size: 16px;color: #1989fa;font-weight: bold;" @click="cancelHandle()">取消</div>
      <div style="font-size: 16px;color: #1989fa;font-weight: bold;" @click="doneHandle()">完成</div>
    </div>

    <div style="padding:0 12px;background-color: #fff;margin-top: 12px;">
      <div style="display: flex;flex-direction: column;border-bottom: 1px solid #ebebeb;"
        v-for="(ikey, index) in Object.keys(info)" :key="index">
        <input type="text" :placeholder="keys[index]" style="border: none;font-size: 14px;height: 44px;"
          v-model="info[ikey]">
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    mounted() { },
    data() {
      return {
        edit: false,
        keys: [
          this.$t("mine.m"),
          this.$t("mine.x"),
          this.$t("mine.csny"),
          this.$t("mine.yj"),
          this.$t("mine.dhhm"),
          this.$t("mine.xb"),
        ],
        info: {
          name: "jeking",
          xing: "su",
          birthday: "1990-01-01",
          email: "sujeking@gmail.com",
          phone: "123456789",
          gender: 1,
        },
      };
    },
    methods: {
      cancelHandle() {
        this.$router.go(-1);
      },
      doneHandle() {
        this.$router.go(-1);
      },
    },
  };
</script>


<style scoped>
  .page {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: #f5f5f5;
  }

  .body {
    flex: 1;
  }
</style>